<template>
  <div class="commonTable">
    <div class="tableArea" :style="showPagination ? 'height:calc(100% - 40px);' : 'height:100%;'">
      <el-table
        highlight-current-row
        class="myTable"
        :border="isBorder"
        v-bind="$attrs"
        :data="data"
        v-on="$listeners"
        ref="myTable"
        height="100%"
        @sort-change="handlerSortChange"
      >
        <el-table-column label="序号" fixed="left" width="60" align="center" prop="num" v-if="sequence"></el-table-column>
        <template v-for="item in columns">
          <el-table-column
            :label="item.label"
            :key="item.vmodel"
            :prop="item.vmodel"
            :fixed="item.isFixed"
            align="center"
            :width="item.vmodel === 'ts' || item.vmodel === 'tm' || item.vmodel === 'warnTime' ? '180px' : 'auto'"
            :sortable="item.isSort ? 'custom' : false"
          >
            <template slot-scope="{ row }">
              <template v-if="item.btnList && item.btnList.length > 0">
                <el-button v-for="bItem in item.btnList" type="text" :key="bItem.vmodel" @click="tableAction(row, bItem.vmodel)">
                  {{ bItem.label }}
                </el-button>
              </template>
              <template v-else>
                <span v-if="item.vmodel === 'orgTag'">
                  {{ transformOrgTag(row.orgTag) }}
                </span>
                <span
                  v-else
                  :class="(item.vmodel === 'cbzsw' && row[item.vmodel] > 0) || (item.vmodel === 'cjjsw' && row[item.vmodel] > 0) ? 'red' : ''"
                >
                  {{ row[item.vmodel] || parseFloat(row[item.vmodel]) == 0 ? row[item.vmodel] : '--' }}
                </span>
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div class="pageArea" v-if="showPagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 30, 50, 100, 200]"
        :page-size="pageSize"
        :pager-count="pagerCount"
        :layout="layout"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { orgTagList } from '@/page/reservoir/views/reportStatistics/config'

export default {
  name: 'CommonTable',
  props: {
    // 表格列
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 表格数据
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 是否有边框
    isBorder: {
      type: Boolean,
      default: false
    },
    // 是否显示序号
    sequence: {
      type: Boolean,
      default: true
    },
    // 是否显示页码
    showPagination: {
      type: Boolean,
      default: true
    },
    // 总记录数
    total: {
      type: Number,
      default: 0
    },
    // 每页显示数目
    pageSize: {
      type: Number,
      default: 30,
      validator: function(value) {
        return [10, 30, 50, 100, 200].includes(value)
      }
    },
    // 当前页码
    pageNum: {
      type: Number,
      default: 1
    },
    pagerCount: {
      type: Number,
      validator(value) {
        return (value | 0) === value && value > 4 && value < 22 && value % 2 === 1
      },
      default: 7
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    isLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        // 添加序号
        if (this.sequence && this.data) {
          let i = this.pageSize * this.pageNum - (this.pageSize - 1)
          this.tableData = this.data.map(res => {
            res['num'] = i
            i++
          })
        }
        setTimeout(() => {
          this.$refs.myTable.doLayout()
        }, 0)
      },
      deep: true,
      immediate: true
    },
    isLoading: {
      immediate: true,
      handler(n) {
        const self = this
        if (n) {
          self.showLoading()
        } else {
          self.closeLoading()
        }
      }
    },
    pageNum: function(curVal) {
      if (curVal === 1) {
        this.scrollToTop()
      }
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.$refs.myTable.doLayout()
    // })
    window.onresize = () => {
      setTimeout(() => {
        this.$refs.myTable.doLayout()
      }, 0)
    }
  },
  methods: {
    handlerSortChange(param) {
      // console.log('param', param)
      this.$emit('lazyLoad', param)
    },
    handleSizeChange(pageSize) {
      this.$emit('update:pageNum', 1)
      this.$emit('update:pageSize', pageSize)

      this.scrollToTop()
      this.$emit('lazyLoad', 1, pageSize)
    },
    handleCurrentChange(pageNum) {
      this.$emit('update:pageNum', pageNum)

      this.scrollToTop()
      this.$emit('lazyLoad', pageNum, this.pageSize)
    },
    showLoading() {
      const self = this
      self.closeLoading()
      self.emptyText = ''
      self.$nextTick(() => {
        const dom = self.$refs['myTable'].$el // .querySelector('.el-table__body-wrapper')
        if (dom && !self.loading) {
          self.loading = this.$loading({
            target: dom,
            lock: true,
            text: '加载中……',
            spinner: 'el-icon-loading',
            background: 'rgba(246,246,246, 0.56)'
          })
        }
      })
    },
    closeLoading() {
      const self = this
      if (self.data.length === 0) {
        self.emptyText = '暂无数据'
      }
      if (self.loading) {
        self.loading.close()
        self.loading = null
      }
    },
    scrollToTop() {
      this.$refs.myTable.bodyWrapper.scrollTop = 0
    },
    tableAction(row, flag) {
      // row - 当前操作行的数据，flag - 按钮标识
      this.$emit('tableRowAction', { row, flag })
    },
    transformOrgTag(flag) {
      // 归属单位转换
      let result = ''
      if (flag) {
        const filter = orgTagList.filter(item => item.id === flag)
        if (filter.length > 0) result = filter[0].name
      }
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
.commonTable {
  width: 100%;
  height: 100%;
  .pageArea {
    text-align: center;
    margin-top: 8px;
  }
  .red {
    color: red;
  }
  /deep/ .el-table__header tr th {
    background-color: #f3f3f7;
    color: #666;
    font-size: 16px;
    text-align: center;
  }
  /deep/ .el-table tr td {
    color: #666;
    font-size: 16px;
  }
  /deep/ .el-table__fixed-right::before,
  /deep/ .el-table__fixed::before {
    background-color: transparent;
  }
  /deep/ .el-table .el-table__body-wrapper .el-table__body .el-table__row:nth-child(even),
  /deep/ .el-table .el-table__fixed .el-table__body .el-table__row:nth-child(even) {
    background-color: #f3f3f7;
    color: #333333;
  }
  /deep/ .el-table__body-wrapper .el-table__body tr:hover > td,
  /deep/ .el-table .el-table__fixed .el-table__body tr:hover > td {
    bakcground-color: #e1e1e1 !important;
  }
}
</style>
